<template>
  <div class="cascader-component">
    <!-- 实现拖拽 -->
    <div
      v-for="(item, index) in options"
      :key="index"
      :class="['cascader-component-draggle', `cascader-component-draggle-${layout}`]"
    >
      <div class="cascader-component-draggle-title">{{ item.label }}</div>
      <div
        class="cascader-component-draggle-warp"
        draggable="true"
        @dragstart="handleDragStart($event, item)"
        @dragend="handleDragEnd"
      >
        <img
          :src="item.coverAddress ? proxyName + '/' + item.coverAddress : cover"
          class="list-img"
          :alt="item.coverAddress ? proxyName + '/' + item.coverAddress : cover"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { omit } from '../../utils'
export default {
  name: 'CascaderComponent',
  props: {
    options: {
      type: Array,
      default: () => []
    },
    layout: {
      type: String,
      default: 'biserial'
    },
    cover: String,
    proxyName: String
  },
  data () {
    return {}
  },
  methods: {
    /* 拖拽开始 */
    handleDragStart (e, item) {
      e?.dataTransfer?.setData('ChartData', JSON.stringify(omit(item, ['coverAddress'])))
    },
    /* 拖拽结束 */
    handleDragEnd () {
      /*  */
    }
  }
}
</script>

<style lang="less" scoped>
@import "../../styles/vars.less";
.cascader-component {
  width: 100%;
  height: auto;
  &-draggle {
    margin: 12px;
    background: @dark-color-3;
    width: calc(100% - 26px);
    // aspect-ratio: 314/211;
    cursor: pointer;
    border: 1px solid transparent;
    &:hover {
      border: 1px solid @primary-color;
      .list-img {
        transform: scale(1.05);
      }
    }
    .cascader-component-draggle-title {
      padding: 0 12px;
      box-sizing: border-box;
      color: rgba(lighten(@dark-color, 99.9% - lightness(@dark-color)), 0.6);
      font-size: 14px;
      height: 36px;
      line-height: 36px;
    }
    .cascader-component-draggle-warp {
      display: flex;
      justify-content: center;
      align-content: center;
      text-align: center;
      padding: 0 12px 15px 12px;
      box-sizing: border-box;
      width: 100%;
      height: 100%;
      // overflow: hidden;
      .list-img {
        width: 100%;
        height: 100%;
        border-radius: 2px;
        object-fit: contain;
        transition: all 0.5s;
      }
    }
  }
}
</style>